<template>
  <div id="admin-sider">
    <div class="sider-bar clearfix">
      <a href="javascript:;" id="stu"> 学生实训考勤管理系统</a>
      <a
        href="javascript:;"
        @click="sider(index)"
        v-for="(item, index) in items"
        :class="{ active: index === curId }"
      >
        {{ item.item }}</a
      >
    </div>
    <div class="header"></div>
    <!-- 顶部 -->
    <!-- 页面提示 -->
    <div class="sider-con">
      <div>
        <div v-show="index === curId" v-for="(content, index) in contents" class="tips">
          {{ content.content }}
        </div>
        <!-- <transition name="fade">
          <p v-show="show" v-bind:style="styleobj">动画实例</p>
        </transition> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      curId: 0,
      flag: true,
      items: [
        { item: "教师信息管理" },
        { item: "学生信息管理" },
        { item: "项目组管理" },
        { item: "课程管理" },
        { item: "考勤管理" },
        { item: "请假记录" },
        { item: "综合打分记录" },
        { item: "设置" },
      ],
      contents: [
        { content: "教师信息管理" },
        { content: "学生信息管理" },
        { content: "项目组管理" },
        { content: "课程管理" },
        { content: "考勤管理" },
        { content: "请假记录" },
        { content: "综合打分记录" },
        { content: "设置" },
      ],
    };
  },

  methods: {
    sider(index) {
      this.curId = index;
    },
  },
};
</script>
<style scoped   >
@import "@/css/reset";

html,
body {
  width: 100%;
  height: 100%;
}

#sider {
  margin: auto 0;
  display: flex;
  position: relative;
  width: 100%;
  height: 100vh;
}

#stu {
  text-indent: 5px;
  font-weight: bolder;
  letter-spacing: 5px;
}

.sider-bar {
  width: 220px;
  background-color: rgb(0, 27, 74);
  height: 100%;
}

.sider-bar a {
  float: left;
  width: 220px;
  line-height: 50px;
  text-align: start;
  text-indent: 50px;
  /* 距离左边的间距 */
  text-decoration: none;
  color: white;
  font-size: 1rem;
}

.sider-bar .active {
  background: rgb(133, 149, 173);
  opacity: 0.9;
  color: black;
  border: 5px solid rgb(146, 181, 228);
  border-radius: 10px;
  line-height: 50px;
  text-align: start;
  text-indent: 45px;
}

.tips {
  height: 29px;
  background: rgb(152, 78, 243);
  left: 270px;
  position: absolute;
  top: 80px;
  right: 0;
  color: white;
  font: 900;
}

.header {
  height: 29px;
  background: rgb(179, 46, 46);
  left: 270px;
  position: absolute;
  top: 0;
  right: 0;
  /* width: 83vw; */
}
</style>

